<!-- eslint-disable vue/valid-v-for -->
<template>
  <div>
    <v-stage :config="konvaStageConfig" ref="stageLevel">
      <v-layer ref="layerLevel">
        <template v-for="(graph, i) in piniaOfDrawingGraphs">
          <template v-if="graph.vueComponentName === 'v-group'">
            <v-group :config="graph.konvaGraphConfig">
              <template v-for="(child, i) in graph.GraphsConfigItems">
                <component :is="child.vueComponentName" :config="child.konvaGraphConfig" />
              </template>
            </v-group>
          </template>
        </template>
      </v-layer>
    </v-stage>
  </div>
</template>
<script setup lang="ts">
import type { T_KonvaGroupConfig } from "@/types/graphs-konva";

import Konva from "konva";

const props = defineProps<{
  piniaOfDrawingGraphs?: T_KonvaGroupConfig[]; //T_GraphsConfigItem2[];
  stageWidthInPixels?: number;
  stageHeightInPixels?: number;
}>();

const stageLevel = ref();
const layerLevel = ref();

const stageSizeAllowedMin_InPixels = 200;

const stage_W_Px_Precomputed = computed<number>(() => {
  if (!props.stageWidthInPixels) {
    return stageSizeAllowedMin_InPixels;
  }
  return props.stageWidthInPixels;
});

const stage_H_Px_Precomputed = computed<number>(() => {
  if (!props.stageHeightInPixels) {
    return stageSizeAllowedMin_InPixels;
  }
  return props.stageHeightInPixels;
});

const konvaStageConfig = reactive<Konva.ContainerConfig>({
  width: stage_W_Px_Precomputed.value,
  height: stage_H_Px_Precomputed.value,
});
</script>
